<template>
  <div class="pagination-box" v-if="page">
    <Page
        @on-change="handlePage"
        v-model:currentPage="page.current_page"
        :page-size="page.per_page"
        background
        layout="total, prev, pager, next"
        small
        :total="page.total" />
  </div>
</template>

<script>

export default {
  props: {
    page: {
      type: Object,
      default: {
        current_page: 1,
        per_page: 1,
        total: 1
      }
    }
  },

  methods: {
    handlePage(page) {
      let query = Object.assign({}, this.$route.query)
      query.page = page
      let path = this.$route.path
      this.$router.push({path, query})
      setTimeout(() => {
        this.$emit('on-change', page)
      }, 200)
    }
  }

}
</script>
<style scoped >
.pagination-box {
  padding: 10px;
}
</style>
